{extend name="tplLayui/baseLayui" /}
{block name="headTitle"}{$page.pageTitle}{/block}
{block name="head"}
<style type="text/css">
</style>
{/block}
{block name="content"}
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 120px;">
                        <select name="status" id="status">
                            <option value="">状态</option>
                            <option value="1">正常</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                    <div class="layui-inline" style="width: 120px;">
                        <select name="keytype" id="keytype">
                            <option value="1">名称</option>
                        </select>
                    </div>
                    <div class="layui-inline">
                        <input type="text" name="keyword" placeholder="关键词" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">查找</button>
                        <button class="layui-btn layui-btn-primary" type="button" lay-event="addnew">新增</button>
                        <a class="layui-btn layui-btn-normal" href="projectList">项目管理</a>
                        <a class="layui-btn layui-btn-normal" href="taskList">任务管理</a>
                    </div>
                </div>
            </div>
            <table id='main_table' lay-filter='main_table'></table>
        </div>
    </div>
{/block}
{block name="tpljs"}
<script type="text/html" id="operationArea">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="task">任务</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
<script type="text/html" id="switchOpen">
    <input type="checkbox" name="{{d.name}}" value="{{d.id}}" lay-skin="switch" lay-text="|" lay-filter="enabled" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script>
    var tableId='main_table',layer=null,cur_win = [];
    layui.extend({
        index:'lib/index'
    }).use(['index','table'], function(){
        var $ = layui.jquery,
        admin = layui.admin,
        form  = layui.form,
        layer = layui.layer,
        table = layui.table,
        m = {
            init:function(){
                table.render({
                    elem: '#'+tableId
                    ,cellMinWidth: 80
                    ,url: 'getServerList'
                    ,page: true
                    ,limit: 20
                    ,limits: [20, 50, 100]
                    ,autoSort: false
                    ,initSort: {
                        field: 'id'
                        ,type: 'desc'
                    }
                    ,cols: [[ //表头
                        {field: 'id', title: 'ID', width:60, align:'right', sort: true}
                        ,{field: 'name', title: '名称', width:200, sort: true}
                        ,{field: 'key', title: '服务器KEY', width:280, sort: true}
                        ,{field: 'describe', title: '描述', minWidth:200}
                        ,{field: 'status_name', title: '是否启用', width:100, align: 'center', templet: '#switchOpen', unresize: true}
                        ,{field: 'create_time', title: '添加时间', width:170, align: 'center'}
                        ,{fixed: 'right', title: '操作', width:150, align:'center', toolbar: '#operationArea'}
                    ]]
                });

                //监听工具条
                table.on('tool('+tableId+')', function(obj){
                    var data = obj.data;
                    if(obj.event === 'edit'){
                        m.add(obj);
                    }else if(obj.event === 'task'){
                        m.tasks(obj);
                    }else if(obj.event === 'delete'){
                        m.del(obj);
                    }
                });
                
                table.on('sort('+tableId+')', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                        var args = m.searchArgs();
                        args.sort_field = obj.field;
                        args.sort_type = obj.type;
                        table.reload(tableId, {
                            page:{curr:1}
                            ,initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                            ,where: args
                        });
                    });
                //监听表格事件
                form.on('switch(enabled)', function(obj){
                    m.enabled(obj);
                });
                
                form.on('submit(search)', function (data) {
                    m.reload(data.field);
                    return false;
                });

                $('.layui-btn').on('click', function(){
                    switch($(this).attr('lay-event')){
                        case 'addnew':
                            m.add('addnew');
                            break;
                    }
                });
            }
            ,searchArgs:function(){
                var args = {};
                args.status = $("#status").val();
                args.keytype = $("#keytype").val();
                args.keyword = $("#keyword").val();
                return args;
            }
            ,search:function(){
                var args = m.searchArgs();
                m.reload(args);
            }
            ,reload:function(args) {
                table.reload(tableId,{page:{curr:1},where:args});
            }
            ,del:function(obj) {
                layer.confirm("你确定删除数据吗？此操作不能撤销！", {icon: 3, title:'提示'},
                    function (index) {
                        wm.load();
                        admin.req({
                            url:'deleteServer',
                            method:'post',
                            data:obj.data,
                            success: function (res) {
                                wm.loaded();
                                if (res.code == 0) {
                                    layer.alert(res.msg, {icon: 1, title:'提示'},function(index) {
                                        obj.del();
                                        layer.close(index);
                                    });
                                } else {
                                    layer.alert(res.msg, {icon: 3, title:'提示'});
                                }
                            },
                            error: function (res) {
                                wm.loaded();
                                layer.alert(res.msg, {icon: 3, title:'提示'});
                                return false;
                            }
                        });
                        layer.close(index);

                    },function (index) {
                        layer.close(index);
                    }
                );
            }
            ,add:function(obj){
                var search = '', id = 0;
                if (obj != 'addnew') {
                    id = obj.data.id;
                }
                if (id > 0) {
                    search = '?id=' + id;
                }
                layer.open({
                    type: 2
                    ,title: '任务信息'
                    ,area: wm.area(900, 400)
                    ,shade: wm.shade
                    ,scrollbar: true
                    ,maxmin: wm.maxmin
                    ,content: 'serverDetail' + search
                    ,yes: function(){
                        $(that).click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                    ,zIndex: layer.zIndex //重点1
                    , cancel: function (index, layero) {
                        wm.onCancel(index);
                        m.reload();
                    }
                    , success: function (layero, index) {
                        wm.onOpen(index);
                        layer.setTop(layero); //重点2
                    }
                });
            }
            ,tasks:function(obj){
                var search = '', id = 0;
                if (obj != 'addnew') {
                    id = obj.data.id;
                }
                if (id > 0) {
                    search = '?id=' + id;
                }
                layer.open({
                    type: 2
                    ,title: '任务部署管理'
                    ,area: wm.area(1200, 600)
                    ,shade: wm.shade
                    ,scrollbar: true
                    ,maxmin: wm.maxmin
                    ,content: 'serverTask' + search
                    ,yes: function(){
                        $(that).click();
                    }
                    ,btn2: function(){
                        layer.closeAll();
                    }
                    ,zIndex: layer.zIndex //重点1
                    , cancel: function (index, layero) {
                        wm.onCancel(index);
                    }
                    , success: function (layero, index) {
                        wm.onOpen(index);
                        layer.setTop(layero); //重点2
                    }
                });
            }
            ,enabled:function(obj) {
                var o = {};
                o.id        = obj.value;
                o.status   = obj.elem.checked ? 1 : 0;

                var enabledStr = o.status == 1 ? '启用' : '不启用';
                layer.confirm("你确定" + enabledStr + "名为:" + obj.elem.name + " 的服务器吗?"
                    ,{
                        icon: 3
                        ,title:'提示'
                        ,cancel: function(index, layero){
                            obj.elem.checked = !obj.elem.checked;
                            form.render();
                            layer.close(index);
                        }
                    }
                    , function (index) {
                        wm.load();
                        admin.req({
                            url:'saveServer'
                            ,method:'post'
                            ,data: o
                            , success: function (res) {
                                wm.loaded();
                                if (res.code == 0) {
                                    layer.alert(res.msg, {icon: 1, title:'提示'},function(index) {
                                        obj.elem.checked = obj.elem.checked;
                                        form.render();
                                        layer.close(index);
                                    });
                                    return false
                                } else {
                                    layer.alert(res.msg, {icon: 3, title:'提示'});
                                }
                            }
                            , error: function (res) {
                                wm.loaded();
                                layer.alert(res.msg, {icon: 3, title:'提示'});
                                return false;
                            }
                        });
                        layer.close(index);

                    },function (index) {
                        obj.elem.checked = !obj.elem.checked;
                        form.render();
                        layer.close(index);
                    }
                );
            }
        };
        m.init();
        layui.main = m;
    });
</script>
{/block}
